<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05- vue实例属性和方法</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
    <h2 ref="hello">你好</h2>
    <p ref="world">世界</p>
    <hr>

    <h1 ref="title">标题：{{name}}</h1>

</div>
<hr style="color: #761c19;background:indigo;">
<hr>

<div id="app2">
    {{msg}}
    <h2 ref="hello">你好</h2>
    <p ref="world">世界</p>
    <hr>

    <h1 ref="title">标题：{{name}}</h1>

</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                msg: 'app_vue_msg属性',
                items: [1, 5, 6, 89]
            }
        },
        name: 'tom',
        age: 24,
        show() {
            console.log('show')
        }
    });
    //    属性
    // vm.属性名 获取data中的属性
    console.log("1 vm.msg 获取属性", vm.msg);

    // vm.$el 获取vue实例关联的元素
    console.log("2 ", vm.$el);
    vm.$el.style.color = 'red';

    // vm.$data //获取数据对象data
    console.log('3 vm.$data', vm.$data);
    console.log("4 vm.$data.msg", vm.$data.msg);

    // vm.$options //获取自定义属性
    console.log("5 vm.$options.name", vm.$options.name);
    console.log("6 vm.$options.age", vm.$options.age);
    vm.$options.show();

    // vm.$refs 获取所有添加ref属性的元素
    console.log("7 vm.$refs", vm.$refs);
    console.log("8 vm.$refs.hello", vm.$refs.hello);
    vm.$refs.hello.style.color = 'blue';

    /*
    * -------------------------
    *  方法
    * ------------------------
    * */
    vm.$mount(); // 手动挂载vue实例
    vm.$mount("#app2");
    let vm1 = new Vue({
        data() {
            return {
                msg: 'app2',
                name: 'tomcat'
            }
        }
    }).$mount("#app2");

    vm.$destroy(); // 销毁实例

    // vm.$nextTick(callback) 在DOM更新完成后再执行回调函数，
    //   一般在修改数据之后使用该方法，以便获取更新后的DOM

    // 修改数据
    vm.name = "suse";
    //修改数据
    vm.name = '汤姆';
    //DOM还没更新完，Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
    // console.log(vm.$refs.title.textContent);
    vm.$nextTick(function () {
        // DOM更新完成，更新完成后再执行此代码
        console.log(vm.$refs.title.textContent);
    });

</script>
</body>
</html>